<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/MyVideo.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">


    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="js/jquery.params.js"></script>

    <style>
        .modal-dialog {
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            -webkit-transform: translate(-50%, -50%) !important;
            -moz-transform: translate(-50%, -50%) !important;
            -ms-transform: translate(-50%, -50%) !important;
            -o-transform: translate(-50%, -50%) !important;
        }
    </style>
</head>
<body>

<!-- 视频平台首页 -->
<div class="container-fluid" id="app">

    <!--    头部导航栏-->
    <header>
        <div style="height: 70px; width:98%;position:fixed;z-index: 50">
            <div class="col-md-push-12 column">

                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="main.html">首页</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="main.html">番剧</a>
                            </li>
                            <li>
                                <a href="main.html">直播</a>
                            </li>
                        </ul>

                        <!--                    搜索框-->
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group" style="width: 500px">
                                <input type="text" class="form-control" @keyup.enter="select" v-model="keyword"
                                       style="width: 495px"/>
                                <input type="text" hidden="hidden">
                            </div>
                            <button type="button" class="btn btn-default" @click="select">查询</button>
                        </form>

                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a v-show="loginDialog" id="modal-12089" href="#loginWin" role="button" class="btn"
                                   data-toggle="modal">
                                    登录
                                </a>
                            </li>

                            <li>
                                <a v-show="loginDialog" id="modal-12090" href="#EnrollWin" role="button" class="btn"
                                   data-toggle="modal">注册</a>
                            </li>

                            <li v-show="!loginDialog" style="padding-top: 4px">
                                <!--                                person.uimage-->
                                <a href="yhzy.html" style="padding-top: 0px">
                                    <img :src="person.uimage" style="width: 40px;height: 40px;border-radius: 20px">
                                </a>
                            </li>

                            <li v-show="!loginDialog">
                                <a>
                                    <button style="border-style: none" @click="logout">退出登录</button>
                                </a>
                            </li>
                            <li>
                                <a href="sc.html">收藏</a>
                            </li>
                            <li>
                                <a href="videohistory.html" target="_blank">历史</a>
                            </li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </header>
    <!--                            登录弹窗-->
    <div class="modal fade" id="loginWin" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <!--                                        内容-->
                <div class="modal-body">

                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户名</label>
                            <input v-model="user.username" type="text" class="form-control" id="exampleInputEmail1"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">密码</label>
                            <input v-model="user.password" type="password" class="form-control"
                                   id="exampleInputPassword1"/>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="login">登录</button>
                </div>
            </div>

        </div>

    </div>


    <!--                              注册窗口-->

    <div class="modal fade" id="EnrollWin" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <!--                                        内容-->
                <div class="modal-body">

                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEnrollEmail1">用户账号</label>
                            <input v-model="user.username" type="text" class="form-control"
                                   id="exampleInputEnrollEmail1"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollPassword1">密码</label>
                            <input v-model="user.password" type="password" class="form-control"
                                   id="exampleInputEnrollPassword1"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollPassword2">请重新输入密码</label>
                            <input v-model="user.password1" type="password" class="form-control"
                                   id="exampleInputEnrollPassword2"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollName1">用户名</label>
                            <input v-model="user.uname" type="text" class="form-control" id="exampleInputEnrollName1"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollEmail2">邮箱</label>
                            <input v-model="user.uemail" type="text" class="form-control" id="exampleInputEnrollEmail2"
                                   value="可不填"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollPhone1">手机号</label>
                            <input v-model="user.uphone" type="text" class="form-control" id="exampleInputEnrollPhone1"
                                   value="可不填"/>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="check">注册</button>
                </div>
            </div>
        </div>
    </div>


    <div class="row clearfix" style="padding: 100px 90px 10px 90px">
        <div class="col-md-12 column">
            <!--            图片滚动-->
            <span>
                <div class="carousel slide" id="carousel-681150">
                <ol class="carousel-indicators">
                    <li data-slide-to="0" data-target="#carousel-681150">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-681150" class="active">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-681150">
                    </li>
                </ol>

                <div class="carousel-inner" style="width: 1300px; height: 500px">
                    <div class="item active">
                        <a href="javascript:void(0)" target="_blank" @click="collect(innerVideo[0].vid)"
                           :title="innerVideo[0].vtitle">
                            <input type="image" :src="innerVideo[0].vcover" width="1300"/>
                        </a>
                    </div>
                    <div class="item">
                        <a href="javascript:void(0)" target="_blank" @click="collect(innerVideo[1].vid)"
                           :title="innerVideo[1].vtitle">
                            <input type="image" :src="innerVideo[1].vcover" width="1300"/>
                        </a>
                    </div>
                    <div class="item">
                        <a href="javascript:void(0)" target="_blank" @click="collect(innerVideo[2].vid)"
                           :title="innerVideo[2].vtitle">
                            <input type="image" :src="innerVideo[2].vcover" width="1300"/>
                        </a>
                    </div>
                </div>

                <a class="left carousel-control" href="#carousel-681150" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-681150" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
            </span>
        </div>
    </div>

    <div class="row clearfix" v-for="(item,key,index) in arr" style="padding: 0px 90px 10px 90px" :key="item.vid">
        <div class="col-md-12 column" v-if="index<2">
            <div class="page-header">
                <h1>{{ key }}</h1>
            </div>
            <!--            视频-->
            <div>
                <div style="float: right"><a :href="'ssym.html?keyword='+key"><small>更多 >></small></a></div>
                <br>
                <div>
                    <span style="width: 210px; height: 150px; margin-right: 8px; display: inline-block"
                          v-for="(temp,index) in item.slice(0,6)" :key="temp.vid">
                        <div>
                            <a :href="'view.html?vid='+temp.vid" target="_blank" @click="collect(temp.vid)">
                                <div class="video" style="width: 210px;height: 150px;position: absolute;"></div>
                                <img :src="temp.vcover" width="210" height="150" style="border-radius: 8px;">
                            </a>
                            <div style="padding-top: 10px"><small>{{ temp.vtitle }}</small></div>
					        <div style="font-size: 5px;padding-top: 10px;height: 20px;width: 180px;display: inline-block">
						<span style="padding-right: 15px;height: 20px">
							<input type="image" src="img/img_6.png" width="20" height="20">
							{{temp.vcount}}
						</span>
						<span style="padding-right: 20px;height: 20px">
							<input type="image" src="img/img_2.png" width="20" height="20" style="border-radius: 10px">
							{{temp.vcollect}}
						</span>

						<span style="height: 20px">
							{{ temp.vuptime }}
						</span>

					</div>
                        </div>
                    </span>
                </div>

            </div>
        </div>
    </div>


    <div class="row clearfix" style="padding: 0px 90px 10px 90px" v-for="(item,key,index) in arr" :key="item.vid">
        <div v-if="index>=2">
            <div class="page-header">
                <h1>{{ key }}</h1>
            </div>
            <div style="float: right"><a :href="'ssym.html?keyword='+key"><small>更多 >></small></a></div>
            <div class="col-md-9 column" style="width: 910px">
                <div>
                    <br>
                    <div>
                        <span style="width: 210px; height: 250px; margin-right: 8px; display: inline-block"
                              v-for="(temp,index) in item.slice(0,8)" :key="temp.vid">

                            <div>
                                <a :href="'view.html?vid='+temp.vid" target="_blank" @click="collect(temp.vid)">
                                    <div class="video" style="width: 210px;height: 150px;position: absolute;"></div>
                                    <img :src="temp.vcover" width="210" height="150" style="border-radius: 8px;">
                                </a>
                            </div>

                            <div style="padding-top: 10px"><small>{{ temp.vtitle }}</small></div>
                            <div style="font-size: 5px;padding-top: 10px;padding-bottom: 10px; height: 20px;width: 180px;display: inline-block">
						<span style="padding-right: 15px;height: 20px">
							<input type="image" src="img/img_6.png" width="20" height="20">
							{{temp.vcount}}
						</span>
						<span style="padding-right: 20px;height: 20px">
							<input type="image" src="img/img_2.png" width="20" height="20" style="border-radius: 10px">
							{{temp.vcollect}}
						</span>

						<span style="height: 20px">
							{{ temp.vuptime }}
						</span>

					        </div>

                        </span>
                    </div>

                </div>
            </div>

            <!--            排行榜-->
            <div class="col-md-3 column" style="width: 300px">
                <div class="tabbable" id="tabs-184209">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <p style="font-size: 30px">排行榜</p>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="panel-979648">
                            <a :href="'view.html?vid='+temp.vid" target="_blank" @click="collect(temp.vid)"
                               style="font-family: Algerian;font-size: 18px " v-for="(temp,index) in item.slice(0,8)"
                               v-if="index<8">{{index+1}} {{ temp.vtitle }}<br></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--    页脚-->
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="jumbotron">
                <div class="container">
                    <center>

                        <p>Copyright© 2022 All Rights Reserved. </p>
                        <p>二组</p>
                        地址：雁山校区（主校区）来宾市铁北大道966号 邮编：546199&nbsp;&nbsp;&nbsp; 电话:0772-6620787
                        柳州校区（分校区）柳州市柳北区沙塘镇君武路170号
                        邮编：545004 电话：0772-2046337
                        本站只用于学习交流！
                    </center>

                </div>
            </div>
        </div>
    </div>
</div>


<script>
    const app = Vue.createApp({
        data() {
            return {
                keyword: '',
                user: {
                    username: '',
                    password: ''
                },
                person: {},
                loginDialog: true,
                arr: [],
                innerVideo: []
            }

        },
        created() {
            this.init()
            if (JSON.parse(localStorage.getItem("person")) != null) {
                this.person = JSON.parse(localStorage.getItem("person"))
                this.loginDialog = false
            } else {
                this.loginDialog = true
            }
        },
        methods: {
            select() {
                if (this.keyword.trim().length === 0) {
                    layer.msg('请输入搜索内容')
                } else {
                    window.location.href = "ssym.html?keyword=" + this.keyword
                }
            },
            login() {
                if (this.user.username.trim().length === 0 || this.user.password.trim().length === 0) {
                    layer.msg('用户名和密码不能为空')
                } else {
                    axios({
                        method: 'post',
                        url: '/users/login',
                        params: {
                            uid: this.user.username,
                            pwd: this.user.password
                        }
                    }).then(response => {
                        console.log(response)
                        if (response.data.code === 20041) {
                            this.loginDialog = false
                            this.person = response.data.data
                            $('#loginWin').modal('hide')
                            localStorage.setItem("person", JSON.stringify(this.person))
                            layer.msg('登录成功！')
                            //window.location.reload()
                        } else {
                            layer.msg('用户名或密码不正确！')
                        }
                    })
                }

            },
            logout() {
                localStorage.removeItem("person")
                this.loginDialog = true
                window.location.reload()
            },
            enrolluser() {
                //注册users
                axios({
                    type: 'put',
                    url: '/users/EnrollUser',
                    params: {
                        uid: this.user.username,
                        pwd: this.user.password,
                    }
                }).then(res => {
                    layer.msg("注册成功");
                });
            },
            enrollperson() {
                axios({
                    type: 'put',
                    url: '/person/EnrollPerson',
                    params: {
                        uid: this.user.username,
                        uname: this.user.uname,
                        uemail: this.user.uemail,
                        uphone: this.user.uphone,
                    }
                }).then(res => {

                });
            },
            check() {
                if (/^\d{9}$/.test(this.user.username)) {
                    if (/^[0-9]*$/.test(this.user.username)) {
                        if (this.user.password === this.user.password1) {
                            this.enrolluser();
                            this.enrollperson();
                            $('#EnrollWin').modal('hide');
                        } else {
                            layer.msg("密码不一致，请重新输入")
                        }
                    } else {
                        layer.msg("用户账号不正确,只能为数字")
                    }
                } else {
                    layer.msg("用户账号需九位数")
                }
            },
            init() {
                axios.get("/video/getAllVideo").then(response => {
                    this.arr = response.data.data
                })
                axios.get("/video/innerVideo").then(response => {
                    this.innerVideo = response.data.data
                    console.log(this.innerVideo[0].vid)
                })
            },
            collect(vid) {
                if (localStorage.getItem("person") !== null) {
                    axios({
                        method: 'post',
                        url: `/history/add`,
                        params: {
                            vid: vid,
                            uid: this.person.uid
                        }
                    })
                }
                location = 'view.html?vid=' + vid;
            },
        }
    }).mount("#app")
</script>

</body>
</html>